<template>
	<el-row justify="space-between" :gutter="10" style="width: 100%; margin-bottom: 15px">
		<el-col :span="8">
			<el-card shadow="hover" style="position: relative">
				<div class="btn" style="position: absolute; right: 0; top: -9px">
					<el-button
						v-for="(btn, index) in functionBtn"
						:key="btn"
						size="small"
						style="margin-left: 0"
						:type="customerClueIdx === index ? 'primary' : ''"
						@click="clickCustomerClue(index)"
						>{{ btn }}</el-button
					>
				</div>
				<div class="statistic">
					<span>客服线索数量:</span>
					{{ clueCount }}
				</div>
			</el-card>
		</el-col>
		<el-col :span="8">
			<el-card shadow="hover" style="position: relative">
				<div class="btn" style="position: absolute; right: 0; top: -9px">
					<el-button
						v-for="(btn, index) in functionBtn"
						:key="btn"
						size="small"
						style="margin-left: 0"
						:type="signNumIdx === index ? 'primary' : ''"
						@click="clickSignNum(index)"
						>{{ btn }}</el-button
					>
				</div>
				<div class="statistic"><span>签约数量:</span>{{ signNum }}</div>
			</el-card>
		</el-col>
		<el-col :span="8">
			<el-card shadow="hover" style="position: relative">
				<div class="btn" style="position: absolute; right: 0; top: -9px">
					<el-button
						v-for="(btn, index) in signTotalBtn"
						:key="btn"
						size="small"
						style="margin-left: 0"
						:type="signMoneyIdx === index ? 'primary' : ''"
						@click="clickSignMoney(index)"
						>{{ btn }}</el-button
					>
				</div>
				<div class="statistic"><span>签约总额:</span>{{ signTotal }}</div>
			</el-card>
		</el-col>
	</el-row>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { httpReqeustApi } from '/@/api/linxyun/base/index';
const httpReqeust = httpReqeustApi();
const functionBtn = reactive(['今日', '本周', '本月', '总数']);
const signTotalBtn = reactive(['今日', '本周', '本月', '总额']);
const customerClueIdx = ref(0);
const clueCount = ref(0);

const clickCustomerClue = (index: number) => {
	customerClueIdx.value = index;
	const apiList = ['query_clue_intraday_count', 'query_clue_current_week_count', 'query_clue_current_month_count', 'query_clue_count'];
	httpReqeust.Post(apiList[index]).then((res) => {
		if (res.success && res.Records.length === 1) {
			clueCount.value = res.Records[0].Count || 0;
		}
	});
};
const signNumIdx = ref(0);
const signNum = ref(0);
const clickSignNum = (index: number) => {
	signNumIdx.value = index;
};
const signTotal = ref(0);
const signMoneyIdx = ref(0);
const clickSignMoney = (index: number) => {
	signMoneyIdx.value = index;
};

const init = () => {
	clickCustomerClue(0);
};
init();
</script>
<style lang="scss" scoped>
.statistic {
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 25px;
	font-weight: 600;
}
</style>
